import {Modal, StyleSheet, Text, TextInput, ToastAndroid, TouchableOpacity, View} from "react-native"
import {useState} from "react";

export enum ReasonType {
    ACCEPT = 'accept',
    REJECT = 'reject',
    CANCEL = 'cancel'
}

type CancelReasonProps = {
    type: ReasonType;
    visible: boolean;
    onClose: () => void;
    onSubmit: (reason: string) => void;
    transparent?: boolean;
};

export function Reason(
    {
        type,
        visible,
        onClose,
        onSubmit,
        transparent = true
    }: CancelReasonProps) {
    const [reason, setReason] = useState<string>("")
    let title, subtitle, placeholder, buttonColor;
    switch (type) {
        case ReasonType.ACCEPT:
            title = "请输入审批同意意见";
            subtitle = "";
            placeholder = "必填";
            buttonColor = "#28a745";
            break;
        case ReasonType.REJECT:
            title = "请输入审批驳回意见";
            subtitle = "";
            placeholder = "必填";
            buttonColor = "#dc3545";
            break;
        case ReasonType.CANCEL:
            title = "请输入取消理由";
            subtitle = "取消后，该审批流程将自动结束";
            placeholder = "必填";
            buttonColor = "#007AFF";
            break;
    }

    const handleSubmit = () => {
        if (reason.length === 0) {
            ToastAndroid.show("取消理由为必填项", ToastAndroid.SHORT);
            return
        }
        onSubmit(reason);
    }

    return (
        <Modal
            visible={visible}
            transparent={transparent}
            onRequestClose={onClose}
            animationType={"fade"}
        >
            <View style={styles.centeredView}>
                <View style={styles.modalView}>
                    <Text style={styles.modalTitle}>{title}</Text>
                    <Text style={styles.modalSubtitle}>{subtitle}</Text>
                    <TextInput
                        style={styles.input}
                        value={reason}
                        placeholder={placeholder}
                        onChangeText={setReason}
                        multiline={true}
                        placeholderTextColor="#999"
                    />
                    <View style={styles.buttonContainer}>
                        <TouchableOpacity
                            style={[styles.button, styles.closeButton]}
                            onPress={onClose}
                        >
                            <Text style={[styles.buttonText, styles.closeButtonText]}>关闭</Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                            style={[styles.button, {marginLeft: 8, backgroundColor: buttonColor}]}
                            onPress={handleSubmit}
                        >
                            <Text style={styles.buttonText}>提交</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },
    modalView: {
        margin: 20,
        backgroundColor: 'white',
        borderRadius: 12,
        padding: 24,
        alignItems: 'center',
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 4,
        elevation: 5,
        width: '85%',
    },
    modalTitle: {
        fontSize: 18,
        fontWeight: 'bold',
        marginBottom: 8,
    },
    modalSubtitle: {
        height:"auto",
        fontSize: 14,
        color: '#666',
        textAlign: 'center',
        marginBottom: 16,
    },
    input: {
        minHeight: 100,
        width: "100%",
        borderWidth: 1,
        borderColor: '#E0E0E0',
        borderRadius: 8,
        padding: 12,
        fontSize: 16,
        lineHeight: 22,
        textAlignVertical: "top",
        backgroundColor: '#F9F9F9',
        marginBottom: 20,
    },
    buttonContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: '100%',
    },
    button: {
        flex: 1,
        paddingVertical: 12,
        borderRadius: 8,
        alignItems: 'center',
        justifyContent: 'center',
    },
    closeButton: {
        backgroundColor: "#F0F0F0",
        marginRight: 8,
    },
    buttonText: {
        color: "white",
        fontSize: 16,
        fontWeight: '600',
    },
    closeButtonText: {
        color: '#333',
    },
})